<template>
  <div v-loading="loadingSave" class="new_network" element-loading-text="加载中...">
    <div class="header">
      <header-network-create
        :is-add="!route.params.id"
        @save="onSave"
        @cancel="onBack"
      ></header-network-create>
    </div>

    <div class="body">
      <div class="main">
        <el-form
          ref="formRef"
          label-position="right"
          :model="data"
          require-asterisk-position="left"
          :rules="rules"
          label-width="84"
          inline-message
        >
          <div class="basic_info">
            <div class="title">基本信息</div>
            <section class="basic_form_content">
              <div class="item_form">
                <!--部门名称-->
                <el-form-item label="部门名称" prop="name">
                  <el-input
                    v-model.trim="data.name"
                    placeholder="请输入部门名称"
                    clearable
                    maxlength="20"
                  />
                </el-form-item>

                <!-- 部门简称 -->
                <el-form-item label="部门简称" prop="shorterName">
                  <el-input
                    v-model.trim="data.shorterName"
                    placeholder="请输入部门简称"
                    clearable
                    maxlength="5"
                  />
                </el-form-item>

                <!--部门编号-->
                <el-form-item label="部门编号">
                  <el-input
                    v-model.trim="data.code"
                    placeholder="如不填写，则系统自动生成"
                    clearable
                    maxlength="50"
                  />
                </el-form-item>

                <!--部门分类-->
                <el-form-item label="部门分类">
                  <el-cascader
                    ref="cascader"
                    v-model="data.networkTypeIds"
                    clearable
                    :props="CascaderProps"
                    :options="dataType"
                    @change="cascaderChange()"
                  >
                    <template #default="{ data }">
                      <span>{{ data.name }}</span>
                      <!-- <span v-if="!node.isLeaf"> ({{ data.childData.length }}) </span> -->
                    </template>
                  </el-cascader>
                </el-form-item>
              </div>
              <div class="item_form">
                <!--部门模式-->
                <el-form-item label="部门模式" prop="category">
                  <el-select v-model="data.category" placeholder="请选择">
                    <el-option
                      v-for="item in categoryList"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    />
                  </el-select>
                </el-form-item>
                <!--团队模式-->
                <el-form-item label="团队模式">
                  <el-select v-model="data.teamType" placeholder="请选择" clearable>
                    <el-option
                      v-for="item in typeList"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    />
                  </el-select>
                </el-form-item>

                <!--部门机构-->
                <el-form-item label="部门机构">
                  <el-select v-model="data.networkAgencyId" placeholder="请选择" clearable>
                    <template #header>
                      <div style="display: flex; gap: 10px; width: 100%">
                        <el-input
                          v-model.trim="selectVo.name"
                          clearable
                          placeholder="请输入"
                          @keyup.enter="selecUserFun"
                          @clear="selecUserFun"
                        />
                        <h-plain-button @click="selecUserFun">搜索</h-plain-button>
                      </div>
                    </template>
                    <el-option
                      v-for="(item, index) in NetworkAgencyList"
                      :key="index"
                      :value="item.id"
                      :label="item.name"
                    />
                  </el-select>
                </el-form-item>

                <!-- 部门仓 -->
                <el-form-item label="部门仓">
                  <el-select
                    v-model="data.storeId"
                    placeholder="请选择部门仓"
                    filterable
                    :filter-method="handleGetWarehouseOptionList"
                    :loading="getWarehouseOptionListLoading"
                  >
                    <el-option
                      v-for="item in warehouseOptionList"
                      :key="item.id"
                      :disabled="item.disabled"
                      :label="item.name"
                      :value="item.id"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </div>
              <div class="item_form">
                <!--部门地址-->
                <el-form-item required label="部门地址" prop="province">
                  <SingleAddress
                    ref="addrsDom"
                    :address="addrs"
                    class="addrsDom_"
                    @value-change="addressValChange"
                  />
                </el-form-item>

                <!--详细地址-->
                <el-form-item label="详细地址" prop="address">
                  <el-input
                    v-model.trim="data.address"
                    type="textarea"
                    maxlength="200"
                    show-word-limit
                    placeholder="请输入详细地址"
                    clearable
                    resize="both"
                  />
                </el-form-item>

                <!--部门状态-->
                <el-form-item label="部门状态">
                  <div class="network_status">
                    <el-radio-group v-model="data.status">
                      <el-radio :value="false" size="small">启用</el-radio>
                      <el-radio :value="true" size="small">禁用</el-radio>
                    </el-radio-group>
                  </div>
                </el-form-item>
              </div>
              <div class="item_form">
                <el-form-item label="联系人">
                  <el-input
                    v-model.trim="data.contacts"
                    placeholder="请输入联系人"
                    maxlength="50"
                  />
                </el-form-item>
                <el-form-item label="业务手机">
                  <el-input
                    v-model.trim="data.businessPhone"
                    placeholder="请输入业务手机"
                    maxlength="20"
                    @input="data.businessPhone = data.businessPhone.replace(/[^\d-]/g, '')"
                  />
                </el-form-item>

                <!-- 部门仓 - 暂时先隐藏后续可能会用到 -->
                <!-- <el-form-item label="部门仓">
                  <el-radio-group v-model="data.enableStore">
                    <el-radio :value="true" size="small">启用</el-radio>
                    <el-radio :value="false" size="small">禁用</el-radio>
                  </el-radio-group>
                </el-form-item> -->
              </div>

              <div class="item_form">
                <!--服务范围-->
                <el-form-item label="服务范围">
                  <MultipleAddress
                    ref="addrsDom_ser"
                    :address="addrs2"
                    class="addrsDom_ service-range"
                    :max-collapse-tags="5"
                    :style="serviceRangeStyle"
                    @value-change="addressValChange2"
                  />
                </el-form-item>
              </div>
            </section>
          </div>

          <div class="permission-strategy">
            <permission-strategy-network-create
              :id="(route.params.id as string)"
              ref="permissionStrategyInstance"
              :team-type="(data.teamType as 1 | 2)"
              :strategy="data.strategy"
            ></permission-strategy-network-create>
          </div>

          <div class="account_info">
            <div class="title">账号信息</div>
            <section class="account_form_content">
              <!--绑定账号-->
              <el-form-item label="绑定账号" prop="phone" label-width="82">
                <div class="query_account">
                  <el-input
                    v-model.trim="data.phone"
                    maxlength="11"
                    clearable
                    placeholder="请输入绑定的手机号"
                    @keyup="handleInputPhone"
                  />
                  <HPlainButton
                    :loading="queryInfoAccountLoading"
                    @click="empPageSelecctList(data.phone)"
                    >查询
                  </HPlainButton>
                  <el-tooltip effect="light" content="用于账号登录" placement="right">
                    <i class="iconfont icon-warning"></i>
                  </el-tooltip>
                </div>
              </el-form-item>

              <!--负责人员-->
              <el-form-item label="账号名称" prop="accountName" label-width="82">
                <div class="personal">
                  <el-input
                    v-model.trim="data.accountName"
                    :disabled="isInput"
                    clearable
                    placeholder="账号名字"
                  />
                  <el-tooltip effect="light" content="获取不到则手动输入！" placement="right">
                    <i class="iconfont icon-warning"></i>
                  </el-tooltip>
                </div>
              </el-form-item>
            </section>
          </div>

          <div class="financial-info">
            <financial-info-network-create
              ref="financialInfoInstance"
            ></financial-info-network-create>
          </div>

          <div class="table_container">
            <div class="title">部门结算</div>
            <section class="table_list">
              <el-table :data="data.moduleSettlements" :border="true" stripe resizable>
                <template #empty>
                  <el-empty description="暂无数据" :image-size="140" />
                </template>
                <!--序号-->
                <el-table-column
                  label="序号"
                  width="50"
                  fixed="left"
                  type="index"
                  :align="'center'"
                />

                <!-- 模块名称 -->
                <el-table-column show-overflow-tooltip label="模块名称" prop="name" min-width="200">
                  <template #default="scope">
                    <el-select
                      v-model="scope.row.moduleId"
                      placeholder="请选择模块"
                      clearable
                      :loading="loading"
                    >
                      <template #header>
                        <div class="select_header">
                          <el-input
                            v-model.trim="searchModuleKeyword"
                            placeholder="请输入关键字"
                            @keyup.enter="onSearchModule(scope.$index)"
                          />
                          <h-plain-button @click="onSearchModule(scope.$index)"
                            >搜索</h-plain-button
                          >
                        </div>
                      </template>
                      <el-option
                        v-for="item in scope.row.workModulePrice"
                        :key="item.name"
                        :disabled="isStop(item.id)"
                        :value="item.id"
                        :label="item.name"
                      />
                    </el-select>
                  </template>
                </el-table-column>

                <!--模块默认费用-->
                <el-table-column show-overflow-tooltip label="模块默认费用" min-width="120">
                  <template #default="item">
                    <el-input
                      :value="
                        item.row.moduleId
                          ? item.row.workModulePrice?.filter((o) => item.row.moduleId == o.id)[0]
                              ?.price
                          : ''
                      "
                      disabled
                    >
                      <template #prepend>￥</template>
                    </el-input>
                  </template>
                </el-table-column>

                <!--部门结算费用-->
                <el-table-column
                  prop="qty"
                  show-overflow-tooltip
                  label="部门结算费用"
                  min-width="140"
                >
                  <template #header>
                    部门结算费用
                    <el-popover ref="popover3" placement="top-start" trigger="click" :width="160">
                      <h5 style="margin-bottom: 10px">批量填充</h5>
                      <el-input
                        v-model.trim="Allprice"
                        placeholder="请输入"
                        @input="Allprice = amountForamt(Allprice)"
                        @keyup.enter="changeAllAllprice"
                      />

                      <div style="display: flex; justify-content: end; margin-top: 10px">
                        <el-button
                          color="#007cff"
                          style="padding: 0 4px; height: 20px"
                          @click="changeAllAllprice"
                          >确定</el-button
                        >
                      </div>
                      <template #reference>
                        <span class="multiple_btn">批量</span>
                      </template>
                    </el-popover>
                  </template>
                  <template #default="item">
                    <el-input
                      v-model.trim="item.row.price"
                      placeholder="结算价"
                      style="height: 28px"
                      @input="item.row.price = amountForamt(item.row.price)"
                    >
                      <template #prepend>￥</template>
                    </el-input>
                  </template>
                </el-table-column>

                <!-- 操作 -->
                <el-table-column prop="operate" label="操作" width="100" fixed="right">
                  <template #default="scope">
                    <el-space :size="0" :spacer="spacer">
                      <h-link
                        v-if="data.moduleSettlements.length > 1"
                        type="error"
                        @click="detelePri(scope.row, scope.$index)"
                        >删除</h-link
                      >
                      <h-link v-if="scope.$index === 0" @click="onAddItem">添加</h-link>
                    </el-space>
                  </template>
                </el-table-column>
              </el-table>
            </section>
          </div>
        </el-form>
      </div>

      <div v-if="data.fieldVals.length > 0" class="custom_field">
        <el-form
          ref="formRef2"
          label-position="right"
          :model="data"
          require-asterisk-position="left"
          :rules="rules"
          label-width="84"
          inline-message
        >
          <div class="title">其他信息</div>
          <section class="field_list">
            <template v-for="(item, bigindex) in data.fieldVals" :key="item.id">
              <el-form-item
                :label="item.name"
                :required="item.required"
                :prop="`fieldVals[${bigindex}][${
                  item.type === 5 || item.type === 6 || item.type === 7 ? 'imgarr' : 'value'
                }]`"
                :rules="[
                  { required: item.required, message: item.tip, trigger: ['blur', 'change'] },
                ]"
              >
                <!-- 文本1 -->
                <el-input
                  v-if="item.type === 1"
                  v-model.trim="item.value"
                  :placeholder="item.tip"
                  type="text"
                  clearable
                  maxlength="100"
                />

                <!-- 多行文本2 -->
                <el-input
                  v-if="item.type === 2"
                  v-model.trim="item.value"
                  :rows="1"
                  type="textarea"
                  maxlength="200"
                  :placeholder="item.tip"
                  show-word-limit
                />

                <!-- 单选3 -->
                <el-select
                  v-if="item.type === 3 && item.contents.length > 3"
                  v-model="item.value"
                  :placeholder="item.tip"
                  clearable
                >
                  <el-option v-for="i in item.contents" :key="i.id" :label="i.val" :value="i.val" />
                </el-select>
                <el-radio-group v-else-if="item.type === 3" v-model="item.value">
                  <el-radio v-for="i in item.contents" :key="i.id" size="small" :value="i.val">{{
                    i.val
                  }}</el-radio>
                </el-radio-group>

                <!-- 多选4 -->
                <el-select
                  v-if="item.type === 4 && item.contents.length > 3"
                  v-model="item.value"
                  :placeholder="item.tip"
                  clearable
                  multiple
                  collapse-tags
                  collapse-tags-tooltip
                >
                  <el-option v-for="i in item.contents" :key="i.id" :label="i.val" :value="i.val" />
                </el-select>
                <el-checkbox-group v-else-if="item.type === 4" v-model="item.value">
                  <el-checkbox v-for="i in item.contents" :key="i.id" :value="i.val">{{
                    i.val
                  }}</el-checkbox>
                </el-checkbox-group>

                <!-- 图片567 -->
                <div
                  v-if="item.type === 5 || item.type === 6 || item.type === 7"
                  class="upload_file"
                >
                  <div v-for="(it, index) in item.imgarr" :key="index" class="file_item">
                    <h-image
                      v-if="
                        it.name
                          ? it.name.replace(/.+\./, '') == 'pdf'
                          : it.image.replace(/.+\./, '') == 'pdf'
                      "
                      :src="pdf"
                      :width="80"
                      :height="50"
                      :padding="2"
                      fit="contain"
                      :is-show-img-preview="false"
                      @preview="lookFile(it.image, 'pdf')"
                      @del="deleteItem2(bigindex, index)"
                    />
                    <h-image
                      v-else-if="
                        right_type.includes(
                          it.name ? it.name.replace(/.+\./, '') : it.image.replace(/.+\./, ''),
                        )
                      "
                      :src="video"
                      :is-show-img-preview="false"
                      :width="80"
                      :height="50"
                      :padding="2"
                      fit="contain"
                      @preview="lookFile(it.image, 'film')"
                      @del="deleteItem2(bigindex, index)"
                    />
                    <h-image
                      v-else
                      :preview-src-list="item.imgarr.map((item) => item.image)"
                      :width="80"
                      :height="50"
                      :padding="2"
                      :src="it.image"
                      fit="contain"
                      :initial-index="index"
                      @del="deleteItem2(bigindex, index)"
                    />
                    <h-tooltip-text
                      :max-width="56"
                      :height="16"
                      :text="
                        it.name
                          ? it.name
                          : it.image?.substring(
                              it.image.lastIndexOf('/') + 1,
                              it.image.lastIndexOf('_'),
                            ) + it.image?.substring(it.image.lastIndexOf('.'))
                      "
                    />
                  </div>
                  <el-upload
                    v-if="item.imgarr.length < item.uploadQty"
                    v-model="item.imgarr"
                    :auto-upload="false"
                    :accept="item.type === 5 ? 'image/*' : item.type === 6 ? '.pdf' : 'video/*'"
                    drag
                    action="#"
                    multiple
                    :show-file-list="false"
                    :on-change="(file) => handleChange2(file, item)"
                  >
                    <el-icon :size="24" color="#007cff">
                      <UploadFilled />
                    </el-icon>
                  </el-upload>
                </div>
              </el-form-item>
            </template>
          </section>
        </el-form>
      </div>
    </div>

    <!-- 修改质保标准弹窗 -->
    <el-dialog
      v-model="quaDialog"
      title="修改部门质保标准"
      width="500px"
      :draggable="true"
      :destroy-on-close="true"
      :close-on-click-modal="false"
      class="qua-dialog"
      top="8vh"
    >
      <div class="cards">
        <div class="card">
          <label>服务类型</label>
          <el-input v-model.trim="input11" disabled class="input-w" />
        </div>
        <div class="card">
          <label>默认时间</label>
          <el-input v-model.trim="input12" disabled class="input-w" />
        </div>
        <div class="card">
          <label>部门时间</label>
          <el-input v-model.trim="input13" class="input-w" />
        </div>
        <p>质保时间修改后，只针对新工单有效，已完成工单和进展中工单不受影响</p>
      </div>
      <div class="btns">
        <HButton type="primary">保存</HButton>
        <HButton @click="quaDialog = false"> 取消 </HButton>
      </div>
    </el-dialog>

    <!-- 修改费用标准弹窗 -->
    <el-dialog
      v-model="costDialog"
      title="修改部门费用标准"
      width="500px"
      :draggable="true"
      :destroy-on-close="true"
      :close-on-click-modal="false"
      class="qua-dialog"
      top="8vh"
    >
      <div class="cards">
        <div class="card">
          <label>费用类型</label>
          <el-input v-model.trim="input14" disabled class="input-w" />
        </div>
        <div class="card">
          <label>默认费用</label>
          <el-input v-model.trim="input15" disabled class="input-w" />
        </div>
        <div class="card">
          <label>部门费用</label>
          <el-input v-model.trim="input16" class="input-w" />
        </div>
        <p>费用标准修改后，只针对未审核费用有效，已审核和已结算费用不受影响</p>
      </div>
      <div class="btns">
        <el-button class="btn_cancel" @click="costDialog = false"> 取消 </el-button>
        <el-button color="#007cff" class="btn_save">保存</el-button>
      </div>
    </el-dialog>

    <!-- 文件查看 -->
    <h-dialog
      v-model="dialogContract"
      :title="isPdf == 'pdf' ? '查看附件' : '查看视频'"
      :width="900"
    >
      <iframe
        v-if="isPdf == 'pdf'"
        :src="`${file}`"
        width="100%"
        height="600"
        frameborder="0"
      ></iframe>
      <div v-else style="display: flex; justify-content: center">
        <video :src="`${file}`" style="width: 100%" controls autoplay></video>
      </div>
    </h-dialog>
  </div>
</template>

<script setup lang="ts">
  import { CSSProperties, h, nextTick, onMounted, ref, watch } from 'vue'
  import useNetwork from './useNetwork'
  import SingleAddress from '@/components/address/singleAddress.vue'
  import MultipleAddress from '@/components/address/multipleAddress.vue'
  import pdf from '@/assets/image/pdf.png'
  import { useGetNetworkTypeOptionsService } from './services/index'
  import _ from 'lodash'
  import { useRoute } from 'vue-router'
  import video from '@/assets/image/pages/order/new/video.png'
  import { ElDivider } from 'element-plus'
  import { getTypeList } from '@/api/basic'
  import HeaderNetworkCreate from '@/components/pages/network/create/header/index.vue'
  import PermissionStrategyNetworkCreate from '@/components/pages/network/create/permission-strategy/index.vue'
  import FinancialInfoNetworkCreate from '@/components/pages/network/create/financial-info/index.vue'
  import { useTagsViewStore } from '@/store/modules/tagsView'
  import { amountForamt } from '@/utils/tools'
  import routeComponentName from '@/config/route-component-name'
  import { useGetWarehouseOptionList } from '@/services/pages/storage/useWarehouse'

  const {
    warehouseOptionList,
    getWarehouseOptionListParam,
    getWarehouseOptionListLoading,
    getWarehouseOptionList,
  } = useGetWarehouseOptionList()

  defineOptions({
    name: routeComponentName.network.networkForm,
  })

  // 财务信息组件实例
  const financialInfoInstance = ref<InstanceType<typeof FinancialInfoNetworkCreate> | null>(null)

  // 部门权限策略组件实例
  const permissionStrategyInstance = ref<InstanceType<
    typeof PermissionStrategyNetworkCreate
  > | null>(null)

  // 间距组件的间隔符
  const spacer = h(ElDivider, {
    direction: 'vertical',
    style: 'display: flex; align-items: center;',
  })

  // 激活路由对象
  const route = useRoute()

  /**
   * 仓库搜索事件
   * @param {String} keyword - 搜索关键字
   */
  const handleGetWarehouseOptionList = _.debounce((keyword: string) => {
    if (getWarehouseOptionListParam.value.name !== keyword) {
      getWarehouseOptionListParam.value.id = ''
      getWarehouseOptionListParam.value.name = keyword
      getWarehouseOptionList()
    }
  }, 600)

  const searchModuleKeyword = ref('')
  const onSearchModule = (index: number) => {
    inputWorkModChange(searchModuleKeyword.value, index)
  }

  const cascaderChange = () => {
    if (data.value.networkTypeIds && data.value.networkTypeIds.length > 0) {
      cascader.value.togglePopperVisible()
    }
  }
  // 使用获取部门分类下拉选项服务
  const { getOptions: getNetworkTypeOptions } = useGetNetworkTypeOptionsService
  const cascader = ref()
  const {
    getBeforeNetworkEditSelectData,
    getnetworkFieldSelect,
    data,
    dialogContract,
    file,
    isPdf,
    categoryList,
    formRef2,
    addrs,
    addrs2,
    isInput,
    formRef,
    loadingSave,
    financialInfoBeforeEdit,
    detelePri,
    Allprice,
    changeAllAllprice,
    handleChange2,
    typeList,
    lookFile,
    deleteItem2,
    onBack,
    addSave,
    addressValChange,
    addressValChange2,
    loading,
    onAddItem,
    inputWorkModChange,
    addrsDom_ser,
    addrsDom,
    rules,
    empPageSelecctList,
    queryInfoAccountLoading,
    NetworkAgencyList,
    selectVo,
    getNetworkAgencyListFun,
    dataType,
  } = useNetwork()
  const right_type = [
    'avi',
    'wmv',
    'mpg',
    'mpeg',
    'mov',
    'rm',
    'ram',
    'swf',
    'flv',
    'mp4',
    'wma',
    'rm',
    'rmvb',
    'flv',
    'mpg',
    'mkv',
  ]
  // 修改质保标准
  const input11 = ref('安装') // 服务类型
  const input12 = ref(60) // 默认时间
  const input13 = ref('') // 部门时间
  // 修改费用标准
  const input14 = ref('测试') // 费用类型
  const input15 = ref(666) // 默认费用
  const input16 = ref('') // 部门费用
  const quaDialog = ref(false)
  const costDialog = ref(false)

  const isStop = (id: string) => {
    return data.value.moduleSettlements
      .map((o) => {
        return o.moduleId
      })
      .includes(id)
  }
  const CascaderProps = ref({
    value: 'id',
    label: 'name',
    children: 'childData',
    checkStrictly: true,
    disabled: 'status',
  })
  // 获取分类列表数据
  const getList = async () => {
    loading.value = true
    await getTypeList().then((res) => {
      dataType.value = res.data.data.rows
    })
    loading.value = false
  }

  // 手机号输入事件
  const handleInputPhone = (event: Event) => {
    ;(event.target as HTMLInputElement).value = (event.target as HTMLInputElement).value.replace(
      /[^\d]/g,
      '',
    )
  }

  // 获取部门分类关键字
  const getNetworkTypeKeyword = ref('')

  /**
   * 获取部门分类
   */
  const handleGetNetworkTypeOptions = _.throttle((query: string) => {
    if (getNetworkTypeKeyword.value !== query) {
      getNetworkTypeKeyword.value = query
      getNetworkTypeOptions(query)
    }
  }, 500)

  const getData = async () => {
    // await networkTypePageSelectList('')
    await getNetworkTypeOptions('')
    if (route.params.id) {
      await getBeforeNetworkEditSelectData(route.params.id as string)
      if (financialInfoInstance.value) {
        financialInfoInstance.value.setForm(financialInfoBeforeEdit.value)
      }
    } else {
      await onAddItem()
      await getnetworkFieldSelect()
      handleGetNetworkTypeOptions('')
    }
  }

  /**
   * 在设备列表添加完分类后，跳转到该页面就默认选中最新添加的分类
   */
  const isFillGoodType = ref(false)
  const selectGoodType = () => {
    if (route.query && route.query.typeName) {
      isFillGoodType.value = true
      dataType.value.forEach((o) => {
        if (o.name == route.query.typeName) {
          data.value.networkTypeIds = [o.id]
        } else {
          o.childData.forEach((o2) => {
            if (route.query.parentId == o.id && o2.name == route.query.typeName) {
              data.value.networkTypeIds = [o.id, o2.id]
            } else {
              o2.childData.forEach((o3) => {
                if (route.query.parentId == o2.id && o3.name == route.query.typeName) {
                  data.value.networkTypeIds = [o.id, o2.id, o3.id]
                }
              })
            }
          })
        }
      })
      isFillGoodType.value = false
    }
  }

  const selecUserFun = _.debounce(() => {
    getNetworkAgencyListFun()
  }, 400)

  const onSave = () => {
    nextTick(async () => {
      if (permissionStrategyInstance.value && financialInfoInstance.value) {
        const permissionStrategy = permissionStrategyInstance.value.getForm()
        const financialInfo = await financialInfoInstance.value.getForm()
        if (permissionStrategy && financialInfo) {
          Object.assign(data.value.strategy, permissionStrategy)
          Object.assign(data.value.financeVo, financialInfo)
          addSave(formRef.value)
        }
      }
    })
  }

  // 服务范围选择器样式
  const serviceRangeStyle = ref<CSSProperties>({ height: '28px' })

  // DOM元素监听对象，用于监听级联选择器标签的高度，然后设置容器的高度
  const resizeObserver = ref<ResizeObserver | null>(null)

  /**
   * 设置服务范围选择器样式
   */
  const setServiceRangeStyle = () => {
    resizeObserver.value = new ResizeObserver((entries) => {
      for (const entry of entries) {
        if (entry.contentRect.height <= 28) {
          serviceRangeStyle.value.height = '28px'
        } else {
          serviceRangeStyle.value.height = `${entry.contentRect.height + 8}px`
        }
      }
    })

    resizeObserver.value.observe(document.querySelector('.service-range .el-cascader__tags'))
  }

  /**
   * 销毁ResizeObserver对象
   */
  const destoryResizeObserver = () => {
    if (resizeObserver.value) {
      resizeObserver.value.disconnect()
    }
  }

  watch(
    () => data.value.teamType,
    (n) => {
      if (n == 2) {
        data.value.strategy.autoSureReceiveOrder = true
      }
    },
  )

  watch(
    () => useTagsViewStore().getReloadPages,
    (value) => {
      if (value.includes(route.path)) {
        destoryResizeObserver()
      }
    },
    { deep: true },
  )

  onMounted(async () => {
    await getData()
    await getList()
    selectGoodType()
    getWarehouseOptionListParam.value.id = data.value.storeId
    await getWarehouseOptionList()
    setServiceRangeStyle()
  })
</script>

<style scoped lang="scss">
  @import './index';
</style>
